<template>
  <div id="takeout-tab">
    <ul>
      <li
        v-for="tab in tabs"
        :key="tab"
        class="tab"
        :class="{ active: currentTab === tab }"
        @click="handleClick(tab)"
      >
        {{ tab }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter(); // 获取路由实例
const tabs = ["商品", "评价", "商家"];
const currentTab = ref("商品"); // 默认激活的商品标签

// 点击事件处理函数
function handleClick(tab) {
  currentTab.value = tab; // 更新当前激活的标签
  const routePath = {
    商品: "/goods",
    评价: "/evaluate",
    商家: "/merchant",
  }[tab]; // 根据标签获取对应的路由路径
  router.push(routePath); // 导航到对应的路由
}
</script>

<style lang="less" scoped>
#takeout-tab {
  width: 100vw;
  height: 100%;
  ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    border-bottom: 0.2px solid #f0f0f0;
    li {
      height: 100%;
      flex: 3;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 12px;
      font-weight: 400;
      color: #939393;
      // border-bottom: 2px solid #ffffff;
    }
    .active {
      font-size: 12px;

      font-weight: 600;
      color: #333333;
    }
  }
}
</style>
